<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>仓库设置</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
<div id="big">
    仓库名称：
    <el-select v-model="tMenuId" placeholder="请选择活动区域">
        <el-option  label="默认"  :value="0"></el-option>
        <el-option v-for="tm in listTMenu" :label="tm.wareName" :value="tm.id"></el-option>
    </el-select>

    创建时间:
    <span class="block">
        <el-date-picker
                v-model="deteTime"
                type="date"
                placeholder="选择日期时间">
        </el-date-picker>
    </span>
    <el-button type="primary" icon="el-icon-search" @click="butSearch">搜索</el-button>
    <br>

    <el-button @click="openDis" style="margin-top: 20px">添加仓位</el-button>


    <el-dialog title="仓库设置" :visible.sync="dialogFormVisible">
        <el-form :model="tMenu">
            <el-form-item label="仓库编号">
                <el-input v-model="tMenu.wareNo" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="仓库名称">
                <el-input v-model="tMenu.wareName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="负责人">
                <el-input v-model="tMenu.person" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="tMenu.telephone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="货区数目">
                <el-input v-model="tMenu.cargoNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="仓库描述">
                <el-input v-model="tMenu.describe" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="创建时间">
                <el-col :span="11">
                    <el-date-picker type="datetime" placeholder="选择日期" v-model="tMenu.deteTime"
                                    style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>

            <el-form-item label="状态">
                <el-input v-model="tMenu.status" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="详细地址">
                <el-input v-model="tMenu.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="经纬度">
                <el-input v-model="tMenu.position   " autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible=false">取 消</el-button>
            <el-button type="primary" @click="saveComm">确 定</el-button>
        </div>
    </el-dialog>

    <el-table
            :data="pageTMenu.records"
            tooltip-effect="dark"
            ref="selectOrgan"
            style="width: 100%"
            :default-sort = "{prop: 'wareNo', order: 'cargoNum'}"
            @select="selectCheck">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>

        <el-table-column
                prop="wareNo"
                sortable
                label="仓库编号"
                width="100">
            <template slot-scope="scope" style="align-content: center">
                <span style="margin-left: 20px" >{{ scope.row.wareNo }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="仓库名称"
                width="120">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.wareName }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="负责人"
                width="120">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.person }}</span>
            </template>
        </el-table-column>

        <el-table-column
                label="联系电话"
                width="130">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
            </template>
        </el-table-column>
        <el-table-column
                prop="cargoNum"
                sortable
                label="货区数目"
                width="120">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.cargoNum }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="仓库描述"
                width="120">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.describe }}</span>
            </template>
        </el-table-column>


        <el-table-column
                label="创建时间"
                width="120">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.deteTime }}</span>
            </template>
        </el-table-column>


        <el-table-column
                label="状态"
                width="160">
            <template slot-scope="scope">
                <span class="el-switch__label el-switch__label--left"><!----><span aria-hidden="true">禁用</span></span>
                <el-switch
                        v-model="scope.row.status"
                        @change="enableDisable(scope.row)"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                </el-switch>
                <span class="el-switch__label el-switch__label--right is-active"><!----><span>启用</span></span>
            </template>
        </el-table-column>


        <el-table-column
                label="详细地址"
                width="120">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.address }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="经纬度"
                width="120">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.position }}</span>
            </template>
        </el-table-column>


        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button size="mini" @click="handDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[1, 2, 3, 4, 5]"
                :page-size="rows"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageTMenu.total">
        </el-pagination>
    </div>
</div>

<script>
    new Vue({
        el: '#big',
        data: {
            pageTMenu: [],
            tMenu: {
                id: 0,
                wareNo: '',
                wareName: '',
                person: '',
                telephone: '',
                cargoNum: 0,
                describe: '',
                deteTime: '',
                status: '',
                address: '',
                position: ''
            },
            rows: 1,
            current: 1,
            listTMenu: [],
            dialogFormVisible: false,
            tMenuId: 0,
            deteTime: null,
        },
        methods: {
            findPageTMenu: function () {
                axios.get('/pageTMenu/' + this.current + '/' + this.rows).then(res => {
                    this.pageTMenu = res.data;
                    this.pageTMenu.records.forEach(tMenu=>{
                        if (tMenu.status=="1"){
                            tMenu.status=true;
                        }else {
                            tMenu.status=false;
                        }
                    })
                })
            },
            findAllTMenu: function () {
                axios.get('/tMenu').then(res => {
                    this.listTMenu = res.data;
                })
            },
            enableDisable:function(eDisable){
                if (eDisable.status){
                    eDisable.status="1"
                }else {
                    eDisable.status="-1";
                }
                this.tMenu=eDisable;
                this.saveComm();
            },
            handleSizeChange: function (rows) {
                this.rows = rows;
                this.current = 1;
                this.findPageTMenu();
            },
            handleCurrentChange: function (current) {
                this.current = current;
                this.findPageTMenu();
            },
            handleEdit: function (index, row) {
                let tt = JSON.parse(JSON.stringify(row));
                if (tt.status){
                    tt.status="1";
                }else {
                    tt.status="-1"
                }
                this.tMenu = tt;
                this.dialogFormVisible = true;
            },
            handDelete: function (row) {
                this.$confirm('此操作将永久删除该, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('/pageTMenu/' + row.id).then(res => {
                        if (res.data == 'ok') {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.current = this.current - 1;
                            this.findPageTMenu();
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            butSearch: function () {
                this.deteTime = this.time(new Date(this.deteTime))
                if ("1970-01-01" == (this.deteTime)) {
                    this.deteTime = null;
                }
                this.rows=1;
                this.current=1;
                axios.get('/pageTMenu?tMenuId=' + this.tMenuId + "&&detetime=" + this.deteTime).then(res => {
                    this.pageTMenu=res.data;
                    this.pageTMenu.records.forEach(tMenu=>{
                        if (tMenu.status=="1"){
                            tMenu.status=true;
                        }else {
                            tMenu.status=false;
                        }
                    })
                })
            },
            time(date) {
                let y = date.getFullYear()
                let m = date.getMonth() + 1
                m = m < 10 ? '0' + m : m
                let d = date.getDate()
                d = d < 10 ? '0' + d : d
                let h = date.getHours()
                h = h < 10 ? '0' + h : h
                let minute = date.getMinutes()
                minute = minute < 10 ? '0' + minute : minute
                let second = date.getSeconds()
                second = second < 10 ? '0' + second : second
                return y + '-' + m + '-' + d
            },
            saveComm: function () {
                let date = new Date(this.tMenu.deteTime);
                this.tMenu.deteTime = date.valueOf();
                if (this.tMenu.id == 0) {
                    axios.post('/pageTMenu', this.tMenu).then(res => {
                        if (res.data == 'ok') {
                            this.$message('添加成功')
                            this.dialogFormVisible = false;
                            this.findPageTMenu();
                        }
                    })
                } else {
                    axios.put('/pageTMenu', this.tMenu).then(res => {
                        if (res.data == 'ok') {
                            this.$message('更新成功')
                            this.dialogFormVisible = false;
                            this.findPageTMenu();
                        }
                    })
                }
            },

            selectCheck: function (a, b, c, d) {
                console.log(a)
                console.log(b)
                console.log(c)
                console.log(d)
            },
            openDis: function () {
                this.tMenu = {
                    id: 0,
                    wareNo: '',
                    wareName: '',
                    person: '',
                    telephone: '',
                    cargoNum: 0,
                    describe: '',
                    deteTime: '',
                    status: '',
                    address: '',
                    position: ''
                };
                this.dialogFormVisible = true;
            }
        },
        mounted() {
            this.findPageTMenu();
            this.findAllTMenu();
        }
    })
</script>
</body>
</html>